@import "base/reset";


/* ===========================
** global
** ===========================*/
.container{
	position: relative;
	margin: 0 auto;
	width: auto;
	padding: 0 15px;

	@include respond-to(lg) {
		width: 1170px;
	}
}


/* ===========================
** header
** ===========================*/
.header{
	@include gradient(right, rgba(66,61,88,1), rgba(66,61,88,.6));
	padding: 10px 0;
	font-size: 0;

	@include respond-to(lg) {
		@include gradient(top, rgba(66,61,88,1), rgba(66,61,88,.6));
		padding: 50px 0;
		text-align: center;
	}

	.logo{
		display: inline-block;
		margin: 0 auto;

		i{
			float: left;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			@include backgroundImage('../image/avatar.jpg', no-repeat, center, center, 100%, 100%);

			@include respond-to(lg) {
				width: 100px;
				height: 100px;
			}
		}
		
		p{
			float: left;
			margin-left: 10px;
			font-size: 0;
			overflow: hidden;
			height: 40px;

			@include respond-to(lg) {
				margin-left: 15px;
				height: auto;
			}

			span{
				display: inline-block;
				font-size: 20px;
				color: $colorFFF;
				line-height: 46px;

				@include respond-to(lg) {
					font-size: 60px;
					line-height: 100px;
				}
			}
		}
	}
	

	$btnNavDuring: .3s;
	.btn-nav{
		@include position(absolute, 3, 0, 10px, none, none);
		width: 40px;
		height: 40px;
		font-size: 0;
		text-align: center;
		overflow: hidden;
		
		@include respond-to(lg) {
			display: none;
		}

		&:before, &:after{
			content: "";
			@include position(absolute, 4, 18px, none, none, 5px);
			width: 30px;
			height: 4px;
			background-color: #FFF;
			border-radius: 2px;
			@include rotate(0);
			@include transitionTransform(opacity, $btnNavDuring, ease-in-out, 0);
		}

		.line{
			width: 30px;
			height: 4px;
			background-color: #FFF;
			border-radius: 2px;
			opacity: 1;
			@include translate(0,0,0);
			@include transitionTransform(opacity, $btnNavDuring, ease-in-out, 0);

			&.line-1{
				@include position(absolute, 4, 8px, none, none, 5px);
			}

			&.line-2{
				@include position(absolute, 4, 28px, none, none, 5px);
			}
		}

		&.btn-nav-active{
			&:before{
				@include rotate(45deg);
				@include transitionTransform(opacity, $btnNavDuring, ease-in-out, 0);
			}

			&:after{
				@include rotate(-45deg);
				@include transitionTransform(opacity, $btnNavDuring, ease-in-out, 0);
			}

			.line{
				&.line-1{
					opacity: 0;
					@include translate(0,-10px,0);
					@include transitionTransform(opacity, $btnNavDuring, ease-in-out, 0);
				}

				&.line-2{
					opacity: 0;
					@include translate(0,10px,0);
					@include transitionTransform(opacity, $btnNavDuring, ease-in-out, 0);
				}
			}
		}
	}
}


/* ===========================
** navbar
** ===========================*/
.body-trans-left{
	@include translate(-200px, 0, 0);
	@include transition(transform, .3s, ease-in-out, 0);
}

.navbar{
	@include position(fixed, 10, 0, -200px, 0, none);
	width: 200px;
	background-color: #423d58;

    @include respond-to(lg) {
    	position: static;
    	width: auto;
    	background: $colorFFF;
	    border-top: 1px solid $colorED;
	    border-bottom: 2px solid $colorE1;
    }

    ul{
    	padding-top: 30px;

    	@include respond-to(lg) {
    		padding-top: 0;
    		text-align: center;
    		font-size: 0;
    	}

    	li{
    		position: relative;
			margin-bottom: 15px;
			font-size: 0;
			text-align: center;

			@include respond-to(lg) {
				display: inline-block;
				padding: 0;
				margin-left: 15px;
				margin-right: 15px;
				margin-bottom: -2px;
			}

			a{
				display: inline-block;
				padding: 0 20px;
				border-bottom: 2px solid transparent;
				@include transition(all, .3s, linear, 0);

				@include respond-to(lg) {
					display: block;
				}

				p{
					font-size: 14px;
					line-height: 3em;
					color: $colorFFF;
					text-align: center;
					@include transition(all, .3s, linear, 0);

					@include respond-to(lg) {
						line-height: 4em;
						color: $color50;
					}
				}
			}

			&.nav-active{

				a{
					border-bottom: 2px solid $colorBlue;
					@include transition(all, .3s, linear, 0);

					p{
						color: $colorFFF;
						@include transition(all, .3s, linear, 0);

						@include respond-to(lg) {
							color: $colorPurple;
						}
					}
				}
			}

			&:hover{
				@include transition(all, .2s, linear, 0);

				a{
					p{
						color: $colorBlue;
						@include transition(all, .2s, linear, 0);
					}
				}
			}
    	}
    }
}


/* ===========================
** main-wrap
** ===========================*/
.main-wrap{
	margin-top: 20px;

	.content{
		@include respond-to(lg) {
			float: left;
			width: 66.666666%;
			padding: 0 15px;
		}

		article{
			position: relative;
			padding: 20px 30px;
			border-radius: 4px;
			background-color: $colorFFF;
			margin-bottom: 20px;
			@include boxShadow(0,0,5px,rgba(66,61,88,0));
			@include transition(all, .1s, linear, 0);

			h1{
				a{
					color: $colorPurple;
					font-size: 18px;
					font-weight: normal;
				}
			}

			p{
				margin: 15px 0;
				line-height: 1.5;
				color: $color50;
			}

			&:hover {
				@include boxShadow(0,0,5px,rgba(66,61,88,.2));
				@include transition(all, .2s, linear, 0);
			}
		}
	}

	.sidebar{
		border-radius: 4px;

		@include respond-to(lg) {
			float: left;
			width: 33.333333%;
			padding: 0 15px;
		}

		.widget{
			margin-bottom: 20px;
			padding: 20px 30px;
			background-color: $colorFFF;

			h3{
				font-weight: normal;
			    padding-bottom: 7px;
			    border-bottom: 1px solid $colorED;
			    margin-bottom: 21px;
			    position: relative;
			    color: $colorPurple;

			    &:after{
			    	content: "";
				    width: 90px;
				    height: 1px;
				    background: $colorBlue;
				    position: absolute;
				    left: 0;
				    bottom: -1px;
			    }
			}

			.tags{
				font-size: 0;

				a{
					display: inline-block;
					padding: 2px 7px;
					margin: 0 7px 7px 0;
					font-size: 14px;
					line-height: 1.5;
					border-radius: 2px;
					border: 1px solid $colorED;
					color: $color999;
					@include transition(all, .1s, linear, 0);

					&:hover{
						border: 1px solid $colorBlue;
						color: $colorFFF;
						background-color: $colorBlue;
						@include transition(all, .2s, linear, 0);
					}
				}
			}

			.my{
				p{
					font-size: 14px;
					color: $color999;
					margin-bottom: 10px;

					i{
						position: relative;
						top: 2px;
						margin-right: 10px;
						font-size: 24px;
						color: $color999;
					}

					a{
						color: $color999;
					}
				}
			}
		}
	}
}


/* ===========================
** footer
** ===========================*/
.footer{
	// @include gradient(bottom, rgba(66,61,88,1), rgba(66,61,88,.6));
	background-color: rgba(66,61,88,1);

	.widget{
		float: left;
		padding: 20px 30px;

		@include respond-to(lg) {
			width: 49.9999%;
		}

		h3{
			font-weight: normal;
		    padding-bottom: 7px;
		    border-bottom: 1px solid rgba(255,255,255,.6);
		    margin-bottom: 21px;
		    position: relative;
		    color: $colorFFF;

		    &:after{
		    	content: "";
			    width: 90px;
			    height: 1px;
			    // background: rgba(255,255,255,1);
			    background-color: $colorBlue;
			    position: absolute;
			    left: 0;
			    bottom: -1px;
		    }
		}

		.tags{
			font-size: 0;

			a{
				display: inline-block;
				padding: 2px 7px;
				margin: 0 7px 7px 0;
				font-size: 14px;
				line-height: 1.5;
				border-radius: 2px;
				border: 1px solid rgba(255,255,255,.6);
				color: rgba(255,255,255,.6);
				@include transition(all, .1s, linear, 0);

				&:hover{
					border: 1px solid $colorBlue;
					color: $colorFFF;
					background-color: $colorBlue;
					@include transition(all, .2s, linear, 0);
				}
			}
		}

		.links{
			font-size: 0;

			a{
				display: inline-block;
				padding: 2px 7px;
				margin: 0 7px 7px 0;
				font-size: 14px;
				line-height: 1.5;
				border-radius: 2px;
				border: 1px solid rgba(255,255,255,0);
				color: rgba(255,255,255,.6);
				@include transition(all, .1s, linear, 0);

				&:hover{
					border: 1px solid $colorBlue;
					color: $colorFFF;
					background-color: $colorBlue;
					@include transition(all, .2s, linear, 0);
				}
			}
		}
	}

	.copyright{
		padding: 20px 0;
		text-align: center;
		font-size: 0;
		
		p{
			margin: 0 10px;
			font-size: 14px;
			color: rgba(255,255,255,.6);
			text-align: center;
			line-height: 1.5;

			@include respond-to(lg) {
				display: inline-block;
			}

			i{
				margin-right: 3px;
			}

			span{
				font-size: 12px;
			}
		}
	}
}
